<template>
  <div>
    <!-- 面包屑 -->
    <el-breadcrumb separator-class="el-icon-arrow-right">
      <el-breadcrumb-item :to="{ path: '/' }">首页</el-breadcrumb-item>
      <el-breadcrumb-item>用户管理</el-breadcrumb-item>
      <el-breadcrumb-item>用户{{isAdd}}</el-breadcrumb-item>
    </el-breadcrumb>
    <!-- 卡片 -->
    <el-card shadow="always" :body-style="{ padding: '20px' }">
      <h1 style="padding-bottom: 15px">{{isAdd}}用户</h1>
      <el-form
        :model="userForm"
        ref="userRefs"
        label-width="100px"
        size="normal"
      >
        <el-form-item label="工号">
          <el-input
            v-model="userForm.workerNumber"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="手机号码">
          <el-input v-model="userForm.phone" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="密码">
          <el-input
            :disabled="id ? true : false"
            type="password"
            v-model="userForm.password"
            style="width: 250px"
          ></el-input>
        </el-form-item>
        <el-form-item label="头像">
          <el-upload
            class="avatar-uploader"
            :action="$http.defaults.baseURL + '/uploads'"
            :headers="getAuthHeader()"
            :show-file-list="false"
            :on-success="handleSuccess"
            name="files"
          >
            <img v-if="userForm.image" :src="userForm.image" class="avatar" />
            <i v-else class="el-icon-plus avatar-uploader-icon"></i>
          </el-upload>
        </el-form-item>
        <el-form-item label="名字">
          <el-input v-model="userForm.name" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="邮箱">
          <el-input v-model="userForm.email" style="width: 250px"></el-input>
        </el-form-item>
        <el-form-item label="职位">
          <el-select v-model="userForm.position" style="width: 250px">
            <el-option
              v-for="item in pcList"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="所属专业">
          <el-select v-model="userForm.rofessional" style="width: 250px">
            <el-option
              v-for="item in proList"
              :key="item._id"
              :label="item.name"
              :value="item._id"
            ></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="权限">
          <el-select v-model="userForm.parentId" style="width: 250px">
            <el-option label="一级权限" :value="0"></el-option>
            <el-option label="二级权限" :value="1"></el-option>
            <el-option label="三级权限" :value="2"></el-option>
          </el-select>
        </el-form-item>
        <el-form-item label="个人介绍">
          <el-input type="textarea" v-model="userForm.bio" rows="4"></el-input>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="onSubmit">{{
            id ? "编辑" : "添加"
          }}</el-button>
          <el-button type="infor" @click="$router.go(-1)">取消</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<script>
export default {
  props: {
    id: {},
  },
  data() {
    return {
      //用户表单信息
      userForm: {
        name: "",
        phone: "",
        email: "",
        password: "",
        position: "",
        parentId: "",
        bio: "",
        image: "",
      },
      //职位列表
      pcList: [],
      //专业列表
      proList: [],
    };
  },
  methods: {
    //点击表单提交按钮
    async onSubmit() {
      if (this.id) {
        const res = await this.$http.put(`/user/${this.id}`, this.userForm);

        if (res.data) {
          this.$router.push("/userList");
          this.$message({
            message: "编辑成功",
            type: "success",
          });
        }
      } else {
        const res = await this.$http.post("/user", this.userForm);
        if (res.data) {
          this.$router.push("/userList");
          this.$message({
            message: "添加成功",
            type: "success",
          });
        }
      }
    },
    //获取编辑列表
    async getUserEditData() {
      const res = await this.$http.get(`/user/${this.id}`);
      this.userForm = res.data;
    },
    //获取位置分类列表
    async getPositionCate() {
      let res = await this.$http.get("/other/positionCate");
      this.pcList = res.data;
    },
    //获取专业分类列表
    async getProList() {
      let res = await this.$http.get("/other/proCate");
      this.proList = res.data;
    },

    //图片上传
    handleSuccess(res) {
      let path =
        "http:\\\\localhost:3000\\" +
        res.data[0].path +
        "-" +
        res.data[0].originalname;
      this.userForm.image = path;
    },
  },
  created() {
    this.id && this.getUserEditData();

    this.getPositionCate();
    this.getProList();
  },
};
</script>

<style lang="less">
.avatar-uploader .el-upload {
  border: 1px dashed #d9d9d9;
  border-radius: 6px;
  cursor: pointer;
  position: relative;
  overflow: hidden;
}
.avatar-uploader .el-upload:hover {
  border-color: #409eff;
}
.avatar-uploader-icon {
  font-size: 28px;
  color: #8c939d;
  width: 80px;
  height: 80px;
  line-height: 80px;
  text-align: center;
}
.avatar {
  width: 80px;
  height: 80px;
  display: block;
}
</style>